import React from 'react'
// 从react-redux中引入useDispatch和useSelector
// useDispatch 返回 store.dispatch
// useSelector 用来获取过滤state中的数据
import { useDispatch, useSelector } from 'react-redux'
import { useAppSelector, useAppDispatch } from './redux/hooks'
// 引入action
import { add, sub, asyncMsg } from './redux/store'

export default function Test() {
  // 拿到dispatch方法
  const dispatch = useAppDispatch()
  // 拿到redux中的数据
  const state = useAppSelector((state) => {
    // 如果项目中使用了ts, 由于ts检查,这里会出现红色波浪线(暂时忽略ts的问题,点击页面中红色提示x号,代码可以正常运行).
    return state.test
  })
  return (
    <div>
      <h1>Test</h1>
      <div>{state.count}</div>
      <div>{state.msg}</div>
      <button
        onClick={() => {
          //dispatch({ type: 'xxx/add' })
          dispatch(add(undefined))
        }}
      >
        +
      </button>
      <button
        onClick={() => {
          //dispatch({ type: 'xxx/sub', payload: 2 })
          dispatch(sub(2))
        }}
      >
        -
      </button>
      <button
        onClick={() => {
          // 此时这里ts会编译错误.点击页面x暂时忽略
          dispatch(asyncMsg())
        }}
      >
        点击异步修改msg的值
      </button>
    </div>
  )
}
